<template>
	<view class="">
		<image :src="baseUrl+'assets/static/ele.png'" class="creatBg" />
		<view class="sele_icon" @click="changeSelect">
			<image src="../../static/day.png" class="day" />
			筛选
			<image :src="baseUrl+'assets/static/groups.png'" class="groups" />
		</view>
		<view class="repair">
			<empty v-if="dataList.length==0"></empty>
			<system-card :propsList='dataList' v-else :isDetails="true"></system-card>
		</view>
		<view class="select_box" v-if="isSelect">
			<view class="content-row">
				<view class="filter-row">查询方式</view>
				<view class="four_box">
					<view v-for="(item,i) in typeList" :key="item.value"
						:class="['four',queryParams.type==item.value?'active':'']" @tap="jumpWord(item.value)">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="content-row">
				<view class="filter-row" v-if="queryParams.type != 4">时间选择</view>
				<view class="content-input" v-if="queryParams.type != 4">
					<picker v-if="queryParams.type == 3" mode="date" :value="queryParams.start_time"
						@change="confirmTime" fields="month">
						<input type="text" v-model="queryParams.start_time" disabled />
					</picker>
					<picker v-if="queryParams.type == 1" mode="date" :value="queryParams.start_time"
						@change="confirmTime" fields="year">
						<input type="text" v-model="queryParams.start_time" disabled />
					</picker>
					<picker v-if="queryParams.type == 4" mode="date" :value="queryParams.start_time"
						@change="confirmTime" fields="day">
						<input type="text" v-model="queryParams.start_time" disabled />
					</picker>
					<picker v-if="queryParams.type == 2" mode="multiSelector" :range="quarterNewList" :value="quarters"
						range-key="text" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange">
						<input type="text" v-model="text" disabled />
					</picker>
					<image :src="baseUrl+'assets/static/groups.png'" class="down" />
					<!-- <image src="../../static/del.png" mode="" v-if="queryParams.start_time" @click="delSearch()" class="del">
					</image> -->
				</view>
				<view class="filter-row" v-if="queryParams.type == 4">开始时间</view>
				<view class="content-input" v-if="queryParams.type == 4">
					<picker mode="date" :value="queryParams.start_time" @change="confirmTime" fields="day">
						<input type="text" v-model="queryParams.start_time" disabled />
					</picker>
					<image :src="imgUrl+'assets/static/groups.png'" class="down" />
				</view>
				<view class="filter-row" v-if="queryParams.type == 4">结束时间</view>
				<view class="content-input" v-if="queryParams.type == 4">
					<picker mode="date" :value="queryParams.end_time" @change="confirmTime2" fields="day">
						<input type="text" v-model="queryParams.end_time" disabled />
					</picker>
					<image :src="imgUrl+'assets/static/groups.png'" class="down" />
				</view>
			</view>
			<view class="btn_select">
				<view class="submit_l" @tap="delSearch"> 清空 </view>
				<view class="submit_r" @tap="getSearch"> 确定 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import changetype from '../../utils/changetype.js'
	import baseUrl from '@/request/baseUrl.js'
	import empty from "@/components/empty.vue"
	import systemCard from '@/components/systemCard.vue'
	export default {
		components: {
			systemCard,
			empty
		},
		data() {
			return {
				isSelect: false,
				baseUrl: baseUrl,
				dataList: [],
				queryParams: {
					start_time: '',
					end_time: '',
					type: 0,
					page: 1,
					equipment_id: '',
					warranty_id:''
				},
				current_page: 1,
				page: 1,
				typeList: [{
					label: '按年',
					value: 1
				}, {
					label: '按季',
					value: 2
				}, {
					label: '按月',
					value: 3
				}, {
					label: '按天',
					value: 4
				}],
				quarterList: null,
				quarters: [0, 0], // 选择后的index集合
				quarterNewList: [
					[],
					[]
				],
				text: ''
			}
		},
		onLoad(e) {
			this.queryParams.equipment_id = e.id
			this.queryParams.warranty_id = e.warranty_id
			this.quarterList = this.getQuarterData(new Date().getFullYear() - 10, new Date().getFullYear())
			this.getNewList()
			// this.doHandleYear()
			this.getList()
		},
		methods: {
			checkDate(str_date,end_date) {
				console.log(this.getDate(str_date) - this.getDate(end_date) > 0,'66666666')
				if (this.getDate(str_date) - this.getDate(end_date) > 0) {
					uni.showToast({
						title: '结束时间不能小于开始时间！',
						icon: 'none'
					})
					return true
				}
			},
			getDate(date) {
				var dates = date.split("-");
				var dateReturn = '';
				for (var i = 0; i < dates.length; i++) {
					dateReturn += dates[i];
				}
				console.log(dateReturn,'99999999')
				return dateReturn;
			},
			getNewList() {
				let array = this.quarterNewList;
				array[0] = this.quarterList;
				array[1] = array[0][0].children;
				this.quarterNewList = array
			},

			//点击确定选择结果
			bindMultiPickerChange(e) {
				var result = e.detail.value;
				this.quarters = result
				this.text = this.quarterNewList[0][result[0]].text + this.quarterNewList[1][result[1]].text
				this.quarterDates(this.quarterNewList[0][result[0]].id, this.quarterNewList[1][result[1]].id)
				console.log(this.queryParams, '----66-')
			},
			//选择列变更时，下级数组变更
			bindMultiPickerColumnChange(e) {
				var column = e.detail.column;
				var index = e.detail.value;
				var array = this.quarterNewList;
				if (column == 0) {
					array[1] = array[column][index].children;
					this.quarterNewList = array
				}
			},
			/**
			 * 对象 季度时间段
			 * @param {Number} year 
			 * @param {Number} quarter 季度 1，2，3，4
			 */
			quarterDates(year, quarter) {
				this.queryParams.start_time = year + '-' + (3 * quarter - 2) + '-01'
				let end_time = 3 * quarter == 12 ? (year * 1 + 1 + '-' + '01-01') : (year + '-' + (3 * quarter + 1) +
					'-01')
				this.queryParams.end_time = year + '-' + 3 * quarter + '-' + new Date(new Date(end_time).getTime() - 24 *
					60 *
					60 * 1000).getDate()
			},

			getQuarterData(startYear, endYear) {
				let data = []
				for (var i = 0; i < (endYear - startYear + 1); i++) {
					var obj = {
						text: startYear + i + '年',
						id: startYear + i,
					}
					let qlist = []
					for (var j = 1; j < 5; j++) {
						let objs = {}
						if (new Date().getFullYear() == (startYear + i)) {
							var month = new Date().getMonth() + 1;
							var stage = Math.ceil(month / 3) + 1;
							if (j == stage) {
								objs.text = ` 第${j}季度`
								objs.id = j
								break
							} else {
								objs.text = ` 第${j}季度`
								objs.id = j
							}
						} else {
							objs.text = ` 第${j}季度`
							objs.id = j
						}
						qlist.push(objs)
					}
					obj.children = qlist.sort(this._sortBy('id', true)) // 倒叙处理数据
					data.push(obj)
				}

				return data.sort(this._sortBy('id', true)) //倒叙处理数据

			},
			_sortBy(field, rev) {
				if (rev === undefined) {
					rev = 1;
				} else {
					rev = (rev) ? 1 : -1;
				}
				return function(a, b) {
					let val1 = a[field] * 1;
					let val2 = b[field] * 1;
					if (val1 < val2) {
						return rev * 1;
					} else if (val1 > val2) {
						return rev * -1;
					}
				}
			},

			doHandleYear(tYear) {
				var myDate = new Date();
				var tYear = myDate.getFullYear();
				this.queryParams.start_time = tYear
			},
			getSearch() {
				if (!this.queryParams.start_time) {
					uni.showToast({
						title: '请选择时间！',
						icon: 'none'
					})
					return
				}
				if(this.queryParams.type == 4){
					 let res = this.checkDate(this.queryParams.start_time,this.queryParams.end_time)
					 if(res){
						 uni.showToast({
						 	title: '结束时间不能小于开始时间！',
						 	icon: 'none'
						 })
						 return
					 }
					 console.log(res,'999')
				}
				this.isSelect = false
				this.queryParams.page = 1
				this.dataList = []
				this.getList()
			},
			delSearch() {
				this.queryParams.start_time = ""
				this.queryParams.end_time = ""
				this.text = ""
				this.isSelect = false
				this.queryParams.type = 0
				this.queryParams.page = 1
				this.dataList = []
				this.getList()
			},
			confirmTime2(e) {
				this.queryParams.end_time = e.detail.value;
			},
			// 切换日期
			confirmTime(e) {
				this.queryParams.start_time = e.detail.value;
			},
			changeSelect() {
				this.isSelect = !this.isSelect
				this.queryParams.type = 1
				this.doHandleYear()
			},
			jumpWord(id) {
				this.queryParams.type = id
				this.queryParams.start_time = ''
				this.queryParams.end_time = ''
				this.text = ""
				console.log(this.queryParams.type, '-------------')
			},
			/* 详情跳转 */
			jump_detail(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
			/* 获取数据 */
			getList() {
				this.$https.post('/environment/getEnvironmentDfList',this.queryParams).then(res => {
					if (res.data.last_page > 0) {
						this.last_page = res.data.last_page
						this.dataList = this.dataList.concat(res.data.lists)
					}
				})
			}
		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-input {
		margin: 24rpx 16rpx 14rpx;
		flex: 1;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		height: 36rpx;
		background-color: #fff;
		box-shadow: 0px 0rpx 2rpx 1rpx rgba(0, 0, 0, 0.08);
		border-radius: 10rpx;
		display: flex;
		padding: 20rpx 24rpx 20rpx 30rpx;
		display: flex;
		align-items: center;

		picker {
			width: 94%;
		}

		image {
			width: 46rpx;
			height: 44rpx;
			margin-right: 0;
		}

		input {
			flex: 1;
		}
	}

	.sele_icon {
		background-color: #fff;
		padding: 16rpx 6rpx 16rpx 26rpx;
		border-radius: 60rpx;
		position: absolute;
		top: 3%;
		right: 4%;
		width: 19%;
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}

	.repair {
		position: absolute;
		top: 11%;
		left: 0;
		width: 92%;
		padding: 0 30rpx;
		background-image: linear-gradient(#e4f1f8, #fff);
		min-height: calc(100vh - 86rpx);
	}

	.select_box {
		position: absolute;
		top: 10%;
		width: 85.5%;
		left: 3.5%;
		border-radius: 20rpx;
		box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
		background-color: #fff;
		padding: 0 30rpx 20rpx;
		z-index: 100;

		.content-row {
			.four_box {
				margin-top: 10rpx;
				display: flex;
			}

			.filter-row {
				margin: 24rpx 16rpx 14rpx;
			}

			.four {
				width: 140px;
				text-align: center;
				background: #F5F6F8;
				border-radius: 14rpx;
				padding: 14rpx 24rpx;
				color: #000;
				margin-left: 10rpx;
				margin-right: 8rpx;
				font-size: 28rpx;
			}

			.active {
				background: #e4f1f8;
				color: #1A66FF;
			}

			.down {
				width: 30rpx;
				height: 23rpx;
			}
		}

		.btn_select {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.submit_r,
			.submit_l {
				width: 292rpx;
				height: 70rpx;
				border-radius: 70rpx;
				background-color: $public-oclor;
				line-height: 70rpx;
				text-align: center;
				color: #FFFFFF;
				margin: 20rpx auto;
			}

			.submit_l {
				background-color: #F5F6F8;
				color: #333333;
				margin-right: 20rpx;
			}
		}
	}

	.select_icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}

	.day {
		width: 30rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	.groups {
		width: 20rpx;
		height: 16rpx;
		margin-left: 6rpx;
	}

	.creatBg {
		width: 100%;
		height: 210rpx;
	}
</style>